<template>
  <div class="hot">
    <div class="hot_title">
      <img src="../../../assets/images/hot.png" alt="">
      <span>本周热门榜单</span>
      <a href="">全部榜单<i class="iconfont">&#xe624;</i></a>
    </div>
    <ul class="list">
      <li v-for="item in hotList">
        <img :src="item.imgUrl" alt="">
        <p>{{item.name}}</p>
        <p><span>￥{{item.price}}</span>起</p>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      hotList: [{
          id: "01",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "02",
          imgUrl: require("@/assets/images/hot2.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "03",
          imgUrl: require("@/assets/images/hot3.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "04",
          imgUrl: require("@/assets/images/hot4.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "05",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "06",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "07",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "08",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
        {
          id: "09",
          imgUrl: require("@/assets/images/hot1.jpg"),
          name: "故宫",
          price: "20",
        },
      ]
    }
  },
}

</script>
<style scoped="" lang="scss">
.hot {
  background: #fff;
  font-size: 0.28rem;

  .hot_title {
    padding: 0.2rem;
    position: relative;

    img {
      width: 0.3rem;
      height: 0.3rem;
    }

    span {
      color: #212121;
      font-size: 0.32rem;
    }

    i {
      transform: rotateY(180deg);
      display: inline-block;
    }

    a {
      position: absolute;
      color: #616161;
      right: 0.2rem;
    }
  }

  .list {
  	overflow-x: scroll;
  	overflow-y: hidden;
  	white-space: nowrap;
  	height:3.0rem;
  	padding:0 0.2rem;
    li {
      width: 2.0rem;
      height: 2.0rem;
      padding-left:0.1rem;
      display: inline-block;

      img {
        width: 100%;
        height: auto;
      }

      p {
        text-align: center;
        margin-top: 0.1rem;
        font-size: 0.24rem;
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        span {
          color: #ff8300;
        }
      }
    }
  }
}

</style>
